<template>
	<view class="live-management-container">
		<!-- 顶部导航栏 -->
		<view class="page-header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">直播管理</text>
			</view>
			<view class="header-right"></view>
		</view>

		<!-- 直播状态区域 -->
		<view class="live-status-section">
			<view class="status-card">
				<text class="status-title">当前直播状态</text>
				<view class="status-info">
					<text class="status-text">{{ liveStatusText }}</text>
				</view>
				<view v-if="isLive" class="live-timer">
					<text class="timer-text">直播时长: {{ liveDuration }}</text>
				</view>
			</view>
		</view>

		<!-- 直播控制区域 -->
		<view class="live-control-section">
			<button 
				v-if="!isLive" 
				class="start-live-btn" 
				@tap="startLive"
			>
				<text class="btn-icon">▶️</text>
				<text class="btn-text">开始直播</text>
			</button>

			<button 
				v-else 
				class="end-live-btn" 
				@tap="endLive"
			>
				<text class="btn-icon">⏹️</text>
				<text class="btn-text">结束直播</text>
			</button>

			<button 
				class="preview-btn" 
				@tap="previewLive"
			>
				<text class="btn-icon">👀</text>
				<text class="btn-text">预览直播</text>
			</button>
		</view>

		<!-- 直播设置区域 -->
		<view class="live-settings-section">
			<view class="setting-item">
				<text class="setting-label">直播标题:</text>
				<input 
					v-model="liveTitle" 
					type="text" 
					placeholder="请输入直播标题"
					maxlength="50"
				/>
			</view>

			<view class="setting-item">
				<text class="setting-label">直播描述:</text>
				<textarea 
					v-model="liveDescription" 
					@input="onDescriptionInput"
					placeholder="请输入直播描述（可选）"
					maxlength="200"
				></textarea>
			</view>

			<view class="setting-item">
				<text class="setting-label">直播时间:</text>
				<text class="time-text">{{ liveTime }}</text>
			</view>

			<view class="setting-item">
				<text class="setting-label">观众权限:</text>
				<view class="permission-select">
					<view 
						class="select-option" 
						:class="{ active: viewerPermission === 'all' }" 
						@tap="setViewerPermission('all')"
					>
						<text class="option-text">所有人</text>
					</view>
					<view 
						class="select-option" 
						:class="{ active: viewerPermission === 'students' }" 
						@tap="setViewerPermission('students')"
					>
						<text class="option-text">仅学生</text>
					</view>
					<view 
						class="select-option" 
						:class="{ active: viewerPermission === 'invited' }" 
						@tap="setViewerPermission('invited')"
					>
						<text class="option-text">邀请用户</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 直播历史区域 -->
		<view class="live-history-section">
			<view class="section-header">
				<text class="section-title">直播历史</text>
			</view>
			<view class="history-list">
				<view v-if="liveHistory.length === 0" class="no-history">
					<text class="no-history-text">暂无直播记录</text>
				</view>
				<view 
					v-else 
					v-for="(record, index) in liveHistory" 
					:key="index" 
					class="history-item"
				>
					<view class="history-content">
						<text class="record-title">{{ record.title }}</text>
						<text class="record-time">{{ record.time }}</text>
						<text class="record-duration">{{ record.duration }}</text>
					</view>
					<view class="record-status">
						<text class="status-text" :class="record.statusClass">{{ record.statusText }}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue';

	// 获取页面参数
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const options = currentPage.options || {};

	// 状态数据
	const isLive = ref(false);
	const liveTitle = ref('');
	const liveDescription = ref('');
	const liveTime = ref(new Date().toLocaleString());
	const viewerPermission = ref('all');
	const liveHistory = ref([
		{
			title: '数学提高班第1次直播',
			time: '2025-04-05 10:00',
			duration: '1小时30分钟',
			statusText: '已结束',
			statusClass: 'ended'
		},
		{
			title: '英语口语班第1次直播',
			time: '2025-04-06 14:00',
			duration: '1小时',
			statusText: '进行中',
			statusClass: 'live'
		}
	]);

	// 计算属性
	const liveStatusText = computed(() => {
		if (isLive.value) {
			return '正在进行中';
		} else {
			return '未开始';
		}
	});

	const liveDuration = computed(() => {
		if (isLive.value) {
			// 模拟直播时长计算
			const startTime = new Date('2025-04-05T10:00:00');
			const now = new Date();
			const diff = now - startTime;
			const hours = Math.floor(diff / (1000 * 60 * 60));
			const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
			return `${hours}小时${minutes}分钟`;
		}
		return '0小时0分钟';
	});

	// 页面方法
	const goBack = () => {
		uni.navigateBack();
	};

	const startLive = () => {
		if (!liveTitle.value.trim()) {
			uni.showToast({
				title: '请输入直播标题',
				icon: 'none'
			});
			return;
		}

		isLive.value = true;
		uni.showToast({
			title: '直播已开始',
			icon: 'success'
		});

		// 将当前直播记录添加到历史
		const record = {
			title: liveTitle.value,
			time: liveTime.value,
			duration: '0小时0分钟',
			statusText: '进行中',
			statusClass: 'live'
		};
		liveHistory.value.unshift(record);

		// 重置部分字段
		liveDescription.value = '';
	};

	const endLive = () => {
		uni.showModal({
			title: '确认结束直播',
			content: '确定要结束本次直播吗？',
			success: (res) => {
				if (res.confirm) {
					isLive.value = false;
					uni.showToast({
						title: '直播已结束',
						icon: 'success'
					});

					// 更新最近一次直播的时长和状态
					if (liveHistory.value.length > 0) {
						const latestRecord = liveHistory.value[0];
						latestRecord.duration = liveDuration.value;
						latestRecord.statusText = '已结束';
						latestRecord.statusClass = 'ended';
					}
				}
			}
		});
	};

	const previewLive = () => {
		uni.showToast({
			title: '正在预览直播...',
			icon: 'loading',
			duration: 1500
		});
		setTimeout(() => {
			uni.showToast({
				title: '预览成功',
				icon: 'success'
			});
		}, 1500);
	};

	const setViewerPermission = (permission) => {
		viewerPermission.value = permission;
	};

	const onDescriptionInput = () => {
		// 输入限制处理
		if (liveDescription.value.length > 200) {
			liveDescription.value = liveDescription.value.slice(0, 200);
		}
	};

	// 页面加载时初始化
	onMounted(() => {
		// 获取传递过来的班级信息
		if (options.className) {
			liveTitle.value = decodeURIComponent(options.className);
		}
	});
</script>

<style>
	page {
		background-color: #f5f7fb;
	}

	.live-management-container {
		min-height: 100vh;
		background: #f5f7fb;
	}

	/* 顶部栏 */
	.page-header {
		position: sticky;
		top: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 28rpx;
		background: linear-gradient(135deg, #4E8CF5, #6A66F2);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}

	.header-left,
	.header-right {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
	}

	.back-icon {
		color: #fff;
		font-size: 36rpx;
		font-weight: 700;
	}

	.header-center .header-title {
		color: #fff;
		font-size: 34rpx;
		font-weight: 600;
	}

	/* 卡片基础样式 */
	.status-card,
	.live-settings-section,
	.live-history-section {
		background: #fff;
		margin: 24rpx;
		padding: 24rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(27, 39, 94, 0.06);
	}

	/* 状态 */
	.status-title {
		color: #6b7280;
		font-size: 26rpx;
	}

	.status-info {
		margin-top: 12rpx;
		padding: 18rpx 22rpx;
		background: linear-gradient(180deg, #EFF6FF, #FFFFFF);
		border: 1rpx solid #e5eaf3;
		border-radius: 14rpx;
	}

	.status-text {
		color: #2563eb;
		font-size: 30rpx;
		font-weight: 600;
	}

	.live-timer .timer-text {
		margin-top: 12rpx;
		color: #10b981;
		font-size: 26rpx;
	}

	/* 控制按钮区域 */
	.live-control-section {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 18rpx;
		margin: 0 24rpx;
	}

	button {
		border: none;
		border-radius: 16rpx;
		padding: 20rpx 24rpx;
		background: #fff;
		box-shadow: 0 6rpx 16rpx rgba(27, 39, 94, 0.06);
	}

	.start-live-btn {
		background: linear-gradient(135deg, #34d399, #10b981);
		color: #fff;
	}

	.end-live-btn {
		background: linear-gradient(135deg, #f43f5e, #ef4444);
		color: #fff;
	}

	.preview-btn {
		grid-column: 1 / -1;
		background: linear-gradient(135deg, #60a5fa, #3b82f6);
		color: #fff;
	}

	.btn-icon {
		margin-right: 8rpx;
		font-size: 28rpx;
	}

	.btn-text {
		font-size: 30rpx;
		font-weight: 600;
	}

	/* 设置区域 */
	.live-settings-section .setting-item + .setting-item {
		margin-top: 20rpx;
	}

	.setting-label {
		display: inline-block;
		min-width: 150rpx;
		color: #374151;
		font-weight: 600;
		font-size: 28rpx;
	}

	input, textarea {
		margin-top: 10rpx;
		width: 100%;
		padding: 18rpx 20rpx;
		border: 1rpx solid #e5e7eb;
		border-radius: 12rpx;
		background: #f9fafb;
		font-size: 28rpx;
	}

	.time-text {
		margin-left: 8rpx;
		color: #6b7280;
		font-size: 28rpx;
	}

	/* 权限选择 */
	.permission-select {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16rpx;
		margin-top: 16rpx;
	}

	.select-option {
		padding: 18rpx 10rpx;
		text-align: center;
		border-radius: 12rpx;
		border: 1rpx dashed #c7d2fe;
		background: #eef2ff;
	}

	.select-option.active {
		border-style: solid;
		background: linear-gradient(180deg, #e0e7ff, #eef2ff);
		border-color: #6366f1;
	}

	.option-text {
		color: #3730a3;
		font-weight: 600;
		font-size: 26rpx;
	}

	/* 历史列表 */
	.live-history-section .section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: 700;
		color: #111827;
	}

	.history-list .history-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		border-radius: 14rpx;
		border: 1rpx solid #eef2f7;
		background: #ffffff;
		margin-top: 16rpx;
	}

	.history-content {
		flex: 1;
	}

	.record-title {
		display: block;
		font-size: 28rpx;
		font-weight: 600;
		color: #111827;
		margin-bottom: 4rpx;
	}

	.record-time,
	.record-duration {
		display: inline-block;
		margin-right: 16rpx;
		color: #6b7280;
		font-size: 24rpx;
	}

	.status-text {
		padding: 8rpx 14rpx;
		border-radius: 999rpx;
		font-size: 22rpx;
	}

	.status-text.live {
		background: #dcfce7;
		color: #16a34a;
	}

	.status-text.ended {
		background: #fee2e2;
		color: #dc2626;
	}

	.no-history {
		padding: 40rpx 0;
		text-align: center;
	}

	.no-history-text {
		color: #9ca3af;
	}
</style>